<template>
  <div class="app-container" v-loading="loading">
    <el-form
      :model="fileFormData"
      :inline="true"
      label-width="110px"
      ref="addP"
      :rules="addPrules"
    >
      <el-divider content-position="left">基础信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="状态" prop="status">
            <span
              :style="`font-size: 18px;
            font-weight: 600;color: ${
              fileFormData.status == 20
                ? 'rgba(4, 217, 25, 0.862745098039216)'
                : fileFormData.status == 30 || fileFormData.status == 15
                ? '#D9001B'
                : 'rgba(2, 167, 240, 0.862745098039216)'
            } `"
              >{{ statue(fileFormData.status, downloadStatuesOptions) }}</span
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="业务线" prop="bizCode">
            <span>{{ fileFormData.bizCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务名称" prop="taskType">
            <span>{{ statue(fileFormData.taskType, tableTypeOptions) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="文件名称" prop="fileName">
            <span>{{
              fileFormData.fileName ? fileFormData.fileName.split(/[.]/)[0] : ""
            }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="进度" prop="totalPage">
            <span>{{
              fileFormData.totalPage
                ? (
                    (fileFormData.currentPage / fileFormData.totalPage) *
                    100
                  ).toFixed(2) + "%"
                : "0%"
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始执行时间" prop="startTime">
            <span>{{ fileFormData.startTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="完结时间" prop="finishTime">
            <span>{{ fileFormData.finishTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="导入文件" prop="status">
            <div class="downloaDown">
              <!-- <div v-for="(item, index) in formData.fileFormData" :key="index"> -->
              <img
                class="excel"
                src="../../../assets/images/excel.png"
                alt=""
              />
              <span
                style="line-height: 30px; cursor: pointer; flex-shrink: 0"
                @click="getDownload()"
                >{{ fileFormData.fileName }}</span
              >
              <!-- </div> -->
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="fileFormData.status == 30 || fileFormData.status == 15">
        <el-col :span="8">
          <el-form-item label="失败原因" prop="status">
            <span style="color: red">{{ fileFormData.failReason }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-divider content-position="left">校验结果</el-divider> -->
      <el-table
        v-if="fileFormData.status == 30 || fileFormData.status == 15"
        :data="
          errorList.slice(
            (currentPage1 - 1) * pagesize1,
            currentPage1 * pagesize1
          )
        "
        v-adaptive="{ bottomOffset: 100 }"
        height="200px"
      >
        <el-table-column
          min-width="110"
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          label="失败提示"
          min-width="200"
          align="center"
          prop="name"
        />
      </el-table>
      <el-pagination
        v-if="fileFormData.status == 30 || fileFormData.status == 15"
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pagesize1"
        background
        :total="errorList.length"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-form>
    <div
      v-if="fileFormData.status != 30 && fileFormData.status != 15"
      style="height: 250px"
    ></div>
    <div class="submit_btn" style="z-index: auto">
      <div class="buttonBox">
        <el-button
          type="primary"
          @click="submit"
          :disabled="loading"
          v-if="!detail"
          >提交</el-button
        >
        <el-button @click="cancel" :disabled="loading">返回</el-button>
      </div>
    </div>
    <div v-if="activate"></div>
  </div>
</template>

<script>
import GoodsSupplier from "@/views/components/GoodsSupplier";
import { listShop } from "@/api/member/shop";
import download from "@/utils/download";
import { sysDynamicTableConfigDetail } from "@/api/common/importProfile";
import { sysImportCenterDetail } from "@/api/common/imoprtCenter.js";
export default {
  mounted() {},
  name: "GuidePriceAdd",
  components: { GoodsSupplier },
  data() {
    return {
      // wsList: [],
      dataList: [],
      errorList: [],
      headerList: [],
      wsList: [],
      loading: false,
      activate: true,
      //平台
      platformList: [],
      fileFormData: {
        fileInfo: [],
      },
      tableTypeOptions: [],
      //店铺
      shopList: [],
      fileData: null,
      // 下载状态字典
      downloadStatuesOptions: [],
      pagesize1: 20, //默认分页每页数据量
      currentPage1: 1, //默认展示第一页数据
    };
  },
  computed: {
    detail() {
      return this.$route.meta.detail;
    },
  },
  //触发回流
  activated() {
    this.activate = false;
    setTimeout(() => {
      this.activate = true;
    });
  },
  async created() {
    this.getDicts("sys_platform_type").then((res) => {
      this.platformList = res.data;
    });
    this.getDicts("sys_Import_Center_Status").then((res) => {
      this.downloadStatuesOptions = res.data;
    });
    this.getDicts("sys_dynamic_table_type").then((response) => {
      this.tableTypeOptions = response.data;
    });
    this.getListShop();
    if (this.$route.params.id) {
      this.loading = true;
      sysImportCenterDetail(this.$route.params.id).then((res) => {
        this.loading = false;
        this.fileFormData = res.data;
        let errorList = [];
        let list = [];
        errorList ? (errorList = res.data.errorData.split("\n")) : [];
        errorList.forEach((item) => {
          let item1 = { name: item };
          list.push({ ...item1 });
        });
        this.errorList = list;
      });
    }
  },
  methods: {
    //下载文件
    getDownload() {
      window.location.href = this.fileFormData.fileInfo[0].url;
    },
    handleSizeChange1(val) {
      this.pagesize1 = val;
    },
    handleCurrentChange1(currentPage) {
      this.currentPage1 = currentPage;
    },
    //获取店铺
    async getListShop(name) {
      let response = await listShop({ name: name });
      this.shopList = response.data;
    },
    handleOutlayInput() {
      this.setDisabled(this.wsList, this.dataList);
    },
    //取消
    cancel() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.divTabulation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.divTabulation > P {
  margin-right: 5px;
}
::v-deep .cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.settlementPriceRange {
  width: 100%;
  height: 300px;
}
::v-deep .filter-tree {
  height: 64vh;
}
::v-deep .el-dialog__body {
  overflow: hidden;
}
::v-deep .el-upload-dragger {
  width: 70vh;
  margin: 0 auto;
}
::v-deep .el-step__description {
  margin-top: 10px;
}
::v-deep .el-divider__text {
  font-weight: 550;
  font-size: 15px;
}
.upload {
  margin-left: 40px;
}
.submit_btn {
  margin-top: 19px;
  position: sticky;
  display: flex;
  bottom: 0;
  justify-content: center;
}
::v-deep .hide-upload > div {
  display: none;
}
.reminder {
  color: red;
  margin-top: 10px;
  margin-left: 20px;
  font-size: 14px;
}
.downloaDown {
  display: flex;
  //flex-shrink: 0;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
  > span {
    margin-left: 10px;
  }
}
.excel {
  width: 30px;
  //margin-right: 5px;
}
</style>
